import React from "react";
import {Table, Breadcrumb, Button, Icon, Input, Tag, Descriptions, message, Modal, DatePicker} from 'antd';

const {Search} = Input;

class PreviewOrder extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            orderInfo: {},
            productInfo: [],
            visible: false
        };
    }

    componentDidMount() {

    }

    showModal = (orderInfo) => {
        const productInfo = orderInfo.productInfo ? orderInfo.productInfo : '[{}]';
        this.setState({
            visible: true,
            orderInfo,
            productInfo: JSON.parse(productInfo)
        });
    };

    handleCancel = () => {
        this.setState({visible: false});
    };

    render() {
        const {orderInfo, productInfo, visible} = this.state;
        const columns = [
            {
                title: '货号',
                dataIndex: 'productNo',
                key: 'productNo',
            },
            {
                title: '名称',
                dataIndex: 'productName',
                key: 'productName',
            },
            {
                title: '品牌',
                dataIndex: 'brandName',
                key: 'brandName',
            },
            {
                title: '价格',
                dataIndex: 'price',
                key: 'price',
            },
            {
                title: '颜色',
                dataIndex: 'color',
                key: 'color',
            }, {
                title: '尺码',
                dataIndex: 'size',
                key: 'size',
            }, {
                title: '数量',
                dataIndex: 'number',
                key: 'number',
            },
            {
                title: '实际归还日期',
                dataIndex: 'realDate',
                key: 'realDate',
            },
            {
                title: 'Fitting结果',
                dataIndex: 'fitting',
                key: 'fitting',
            }, {
                title: '反馈是否有效',
                dataIndex: 'feedback',
                key: 'feedback',
            }, {
                title: '归还状态',
                dataIndex: 'returnStatus',
                key: 'returnStatus',
            }, {
                title: '产生费用',
                dataIndex: 'extraFee',
                key: 'extraFee',
            }];
        return (
            <Modal
                visible={visible}
                title={'完成订单详情'}
                footer={false}
                onCancel={this.handleCancel}
                // onOk={this.handleCreate}
                centered
                width={'90vw'}
                bodyStyle={{maxHeight: '70vh', overflow: 'scroll'}}>
                <Descriptions
                    bordered
                    column={12}
                    layout="vertical"
                >
                    <Descriptions.Item span={4}
                                       label="创建时间">{orderInfo.lendStatus ? orderInfo.lendStatus : null}</Descriptions.Item>
                    <Descriptions.Item span={4}
                                       label="更新时间">{orderInfo.lendStatus ? orderInfo.lendStatus : null}</Descriptions.Item>
                    <Descriptions.Item span={4}
                                       label="经手人">{orderInfo.operator ? orderInfo.operator : null}</Descriptions.Item>
                    <Descriptions.Item span={3}
                                       label="借用人员">{orderInfo.lendPerson ? orderInfo.lendPerson : null}</Descriptions.Item>
                    <Descriptions.Item span={3} label="微信ID"></Descriptions.Item>
                    <Descriptions.Item span={3} label="所属公司"></Descriptions.Item>
                    <Descriptions.Item span={3}
                                       label="联系电话">{orderInfo.receivePhonenumber ? orderInfo.receivePhonenumber : null}</Descriptions.Item>
                    <Descriptions.Item span={3}
                                       label="试衣日期">{orderInfo.lendTimeDura ? orderInfo.lendTimeDura : null}</Descriptions.Item>
                    <Descriptions.Item span={3}
                                       label="归还日期">{orderInfo.returnTime ? orderInfo.returnTime : null}</Descriptions.Item>
                    <Descriptions.Item span={3}
                                       label="借用艺人">{orderInfo.star ? orderInfo.star : null}</Descriptions.Item>
                    <Descriptions.Item span={3}
                                       label="拍摄主题">{orderInfo.photoTheme ? orderInfo.photoTheme : null}</Descriptions.Item>
                    <Descriptions.Item span={12} label="产品信息">
                        <Table
                            columns={columns}
                            dataSource={productInfo}
                            pagination={false}
                        />
                    </Descriptions.Item>
                    <Descriptions.Item span={3}
                                       label="送达日期">{orderInfo.lendTimeDura ? orderInfo.lendTimeDura : null}</Descriptions.Item>
                    <Descriptions.Item span={3}
                                       label="配送方式">{orderInfo.sendMethod ? orderInfo.sendMethod : null}</Descriptions.Item>
                    <Descriptions.Item span={6}
                                       label="配送地址">{orderInfo.receiveAddress ? orderInfo.receiveAddress : null}</Descriptions.Item>
                    <Descriptions.Item span={6}
                                       label="快递单号">{orderInfo.productNumber ? orderInfo.productNumber : null}</Descriptions.Item>
                    <Descriptions.Item span={6}
                                       label="快递费用">{orderInfo.sendPayment ? orderInfo.sendPayment : null}</Descriptions.Item>
                </Descriptions>
            </Modal>
        );
    }
}

export default PreviewOrder;